<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
  </head>
  <body class="pear-container">
    <div class="layui-card">
      <div class="layui-card-body">
        <form class="layui-form" action="">
          <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
              <input
                type="text"
                name="realName"
                placeholder=""
                class="layui-input"
              />
            </div>
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
              <input
                type="text"
                name="username"
                placeholder=""
                class="layui-input"
              />
            </div>
            <button
              class="pear-btn pear-btn-md pear-btn-primary"
              lay-submit
              lay-filter="user-query"
            >
              <i class="layui-icon layui-icon-search"></i>
              查询
            </button>
            <button type="reset" class="pear-btn pear-btn-md">
              <i class="layui-icon layui-icon-refresh"></i>
              重置
            </button>
          </div>
        </form>
      </div>
    </div>
    <div class="layui-card">
      <div class="layui-card-body">
        <table id="user-table" lay-filter="user-table"></table>
      </div>
    </div>

    <script type="text/html" id="user-toolbar">
      <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
      </button>
      <button
        class="pear-btn pear-btn-danger pear-btn-md"
        lay-event="batchRemove"
      >
        <i class="layui-icon layui-icon-delete"></i>
        删除
      </button>
    </script>

    <script type="text/html" id="user-bar">
      <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>
      </button>
      <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
        <i class="layui-icon layui-icon-delete"></i>
      </button>
      <button class="pear-btn pear-btn-sm" id="more_{{d.userId}}">
        <i class="layui-icon layui-icon-triangle-d"></i>
      </button>
    </script>

    <script type="text/html" id="user-enable">
      <input
        type="checkbox"
        name="enable"
        value="{{d.id}}"
        lay-skin="switch"
        lay-text="启用|禁用"
        lay-filter="user-enable"
        checked="{{ d.enable == 0 ? 'true' : 'false' }}"
      />
    </script>

    <script type="text/html" id="user-sex">
      {{#if (d.sex == 1) { }}
      <span>男</span>
      {{# }else if(d.sex == 2){ }}
      <span>女</span>
      {{# } }}
    </script>

    <script type="text/html" id="user-login">
      {{#if (d.login == 0) { }}
      <span>在线</span>
      {{# }else if(d.sex == 1){ }}
      <span>离线</span>
      {{# } }}
    </script>

    <script type="text/html" id="user-createTime">
      {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
    </script>

    <div style="display: none">
      <div class="layer-top">
        <br />
        <h3>上侧弹层内容...</h3>
      </div>
    </div>

    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script>
      layui.use(["table", "form", "jquery", "drawer", "dropdown"], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let drawer = layui.drawer;
        let dropdown = layui.dropdown;

        let MODULE_PATH = "/system/user/";

        let cols = [
          [
            {
              type: "checkbox",
            },
            {
              title: "账号",
              field: "username",
              align: "center",
              width: 100,
            },
            {
              title: "姓名",
              field: "realName",
              align: "center",
            },
            {
              title: "性别",
              field: "sex",
              align: "center",
              width: 80,
              templet: "#user-sex",
            },
            {
              title: "电话",
              field: "phone",
              align: "center",
            },
            {
              title: "启用",
              field: "enable",
              align: "center",
              templet: "#user-enable",
            },
            {
              title: "登录",
              field: "login",
              align: "center",
              templet: "#user-login",
            },
            {
              title: "注册",
              field: "createTime",
              align: "center",
              templet: "#user-createTime",
            },
            {
              title: "操作",
              toolbar: "#user-bar",
              align: "left",
              width: 160,
            },
          ],
        ];

        table.render({
          elem: "#user-table",
          url: "http://localhost:3000/table",
          page: true,
          cols: cols,
          skin: "line",
          toolbar: "#user-toolbar",
          defaultToolbar: [
            {
              layEvent: "refresh",
              icon: "layui-icon-refresh",
            },
            "filter",
            "print",
            "exports",
          ],
          done: function (res, curr, count) {
            for (var i = 0; i < res.data.length; i++) {
              dropdown.render({
                elem: "#more_" + res.data[i].userId,
                data: [
                  {
                    title: "menu item11",
                    id: 100,
                  },
                  {
                    title: "menu item22",
                    id: 101,
                  },
                  {
                    title: "menu item33",
                    id: 102,
                  },
                ],
                id: "#more_" + res.data[i].userId,
                click: function (obj) {
                  layer.tips("点击了：" + obj.title, this.elem, {
                    tips: [1, "#5FB878"],
                  });
                },
              });
            }
          },
        });

        table.on("tool(user-table)", function (obj) {
          if (obj.event === "remove") {
            window.remove(obj);
          } else if (obj.event === "edit") {
            window.edit(obj);
          }
        });

        table.on("toolbar(user-table)", function (obj) {
          if (obj.event === "add") {
            window.add();
          } else if (obj.event === "refresh") {
            window.refresh();
          } else if (obj.event === "batchRemove") {
            window.batchRemove(obj);
          }
        });

        form.on("submit(user-query)", function (data) {
          table.reload("user-table", {
            where: data.field,
          });
          return false;
        });

        form.on("switch(user-enable)", function (obj) {
          layer.tips(
            this.value + " " + this.name + "：" + obj.elem.checked,
            obj.othis
          );
        });

        window.add = function () {
          drawer.open({
            direction: "top",
            dom: ".layer-top",
            distance: "30%",
          });
        };

        window.edit = function (obj) {
          layer.msg("修改");
        };

        window.remove = function (obj) {
          layer.confirm(
            "确定要删除该用户",
            {
              icon: 3,
              title: "提示",
            },
            function (index) {
              // 关闭弹出层
              layer.close(index);
              let loading = layer.load();
              console.log(obj.data["userId"]);

              $.ajax({
                // url: "http://localhost:3000/message/1",
                // 发了ajax 成功,就会刷新页面???
                url: "http://localhost:3000/message/",
                dataType: "json",
                type: "delete",
                // success: function (result) {
                //   // 关闭loading 弹出层
                //   layer.close(loading);
                //   // if (result.success) {
                //   //   layer.msg(
                //   //     result.msg,
                //   //     {
                //   //       icon: 1,
                //   //       time: 1000,
                //   //     },
                //   //     function () {
                //   //       obj.del();
                //   //     }
                //   //   );
                //   // } else {
                //   //   layer.msg(result.msg, {
                //   //     icon: 2,
                //   //     time: 1000,
                //   //   });
                //   // }
                // },
              });
            }
          );
        };

        window.batchRemove = function (obj) {
          let data = table.checkStatus(obj.config.id).data;
          if (data.length === 0) {
            layer.msg("未选中数据", {
              icon: 3,
              time: 1000,
            });
            return false;
          }
          let ids = "";
          for (let i = 0; i < data.length; i++) {
            ids += data[i].userId + ",";
          }
          ids = ids.substr(0, ids.length - 1);
          layer.confirm(
            "确定要删除这些用户",
            {
              icon: 3,
              title: "提示",
            },
            function (index) {
              layer.close(index);
              let loading = layer.load();
              $.ajax({
                url: MODULE_PATH + "batchRemove/" + ids,
                dataType: "json",
                type: "delete",
                success: function (result) {
                  layer.close(loading);
                  if (result.success) {
                    layer.msg(
                      result.msg,
                      {
                        icon: 1,
                        time: 1000,
                      },
                      function () {
                        table.reload("user-table");
                      }
                    );
                  } else {
                    layer.msg(result.msg, {
                      icon: 2,
                      time: 1000,
                    });
                  }
                },
              });
            }
          );
        };

        window.refresh = function (param) {
          table.reload("user-table");
        };
      });
    </script>
  </body>
</html>
